<template>
  <div class="data-view">
    <el-row style="margin-top: 10px">
      <el-table :data="data"
                :column='columns'
                :pagination='pagination'
                :height="tableHeight"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <!--        <el-table-column type="selection" width="50">-->
        <!--        </el-table-column>-->
        <el-table-column v-for="column in columns"
                         :key="column.id"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :align="column.align">
          <template slot-scope='scope'>
            <el-tag v-if="column.mappingType == 'tag'">
              <!-- {{doMapping(column,scope)}} -->
              {{ column.formatter ? doFormat(column, scope) : doMapping(column, scope) }}
            </el-tag>
            <div v-else>
              <!-- {{doMapping(csope,column)}} -->
              {{ column.formatter ? doFormat(column, scope) : doMapping(column, scope) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleView(scope.$index)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handlePageChange"
                     :current-page.sync="pagination.page"
                     :page-sizes="[1, 2, 10, 15]"
                     :page-size="pagination.pageSize"
                     layout="total, sizes, prev, pager, next"
                     :total="pagination.total">
      </el-pagination>
    </el-row>
    <!-- 详情对话框 -->
    <el-dialog title="查看" :visible="dialogVisible" :before-close="closeDialog" @opened="openDialog">
      <el-row style="padding-bottom: 10px">
        <table class="info">
          <tr v-for="column in columns"
              :key="column.id"
              :prop="column.prop"
              :label="column.label">
            <td>{{ column.label }}</td>
            <td v-if="data[currentIndex]">{{ data[currentIndex][column.prop] }}</td>
          </tr>
        </table>
      </el-row>
      <el-row style="border-bottom: 20px; text-align: center">
        <el-button type="primary" size="small" @click="closeDialog()" style="margin: 0 auto">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DataView",
  props: {
    columns: {
      type: Array,
      "default": () => [],
    },
    data: {
      type: Array,
      "default": () => [],
    },
    pagination: {
      type: Object,
      "default": () => {
      }
    },
    MissingValueFill: {
      type: String,
      "default": () => []
    }
  },
  data() {
    return {
      tableHeight: window.innerHeight - 179,
      multipleSelection: [],
      //  对话框参数
      dialogVisible: false,
      currentIndex: 0,
      pageInfo: {}
    }
  },
  methods: {
    /* 存储页码信息 */
    hanePageInfo(page, pageSize) {
      this.pageInfo.page = page;
      this.pageInfo.pageSize = pageSize;
      this.$emit('paginationChange', this.pageInfo);
    },

    handleSelectionChange(val) {
      console.log(val);
    },

    /* 选择页码 */
    handlePageChange(val) {
      //获取当前条数
      let {pageSize} = this.pagination;
      this.hanePageInfo(val, pageSize);
    },

    /* 选择条数 */
    handleSizeChange(val) {
      this.pagination.page = 1;
      let {page} = this.pagination
      this.hanePageInfo(page, val);
    },

    handleView(index) {
      this.dialogVisible = true;
      this.currentIndex = index;
    },

    /* 负责渲染不需要转化的数据 */
    doMapping(column, scope) {
      let index = scope.row[column.prop];
      if (column.mapping) {
        return column.mapping[index].value;
      } else {
        if (this.MissingValueFill && !index) {
          return this.MissingValueFill
        } else {
          return `${index}`
        }
      }
    },

    /* 负责接收渲染带formatter字段的数据 */
    doFormat(column, scope) {
      let format = column.formatter;
      let ReturnValue = scope.row[column.prop];
      if (this.MissingValueFill && !ReturnValue) {
        return this.MissingValueFill
      }
      return format(ReturnValue)
    },

    // 对话框函数
    openDialog() {
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.data-view {
  width: 100%;
}

/*.el-table .cell {*/
/*	text-align: center !important;*/
/*}*/

.el-pagination {
  text-align: center;
  /*padding: 5px;*/
}

.info {
  width: 100%;
}

.info tr {
}

.info tr td {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.info tr td:first-child {
  font-weight: bolder;
}
</style>
